let ranking1 =
    ''
let ranking2 =
    ''
let ranking3 =
    ''
let ranking4 =
    ''
let dataZoomMove = {
    start: 0,
    end: 5
}
let xdata = ['大蒜', '韭菜', '大豆', '土豆', '山药']
let sdata = [100, 99, 90, 80, 60, 50]
let sdata1 = [
    { symbolPosition: 'end', value: 100 },
    { symbolPosition: 'end', value: 99 },
    { symbolPosition: 'end', value: 90 },
    { symbolPosition: 'end', value: 80 },
    { symbolPosition: 'end', value: 60 },
    { symbolPosition: 'end', value: 50 },
    { symbolPosition: 'end', value: 40 }
]
let barWidth = 18
let padding = [3, -25, 3, 5]
export const option = {
    //你的代码
    tooltip: {
        show: false,
        trigger: 'axis'
    },

    grid: {
        containLabel: true,
        bottom: '1%',
        left: '1%',
        top: '1%',
        right: '5%'
    },
    xAxis: {
        type: 'value',
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    yAxis: [
        {
            type: 'category',
            data: xdata,
            inverse: true,
            axisLabel: {
                fontSize: '18px',
                inside: false,
                verticalAlign: 'center',

                padding: [5, 0, 0, 0],
                margin: 20, //刻度标签与轴线之间的距离
                formatter: function (value: any, index: any) {
                    if (index < 3) {
                        return `{img${index}|${xdata.indexOf(value) + 1}} {a|${value}}`
                    } else {
                        return `{img3|${xdata.indexOf(value) + 1}} {a|${value}}`
                    }
                },
                rich: {
                    a: {
                        fontSize: '14px',
                        color: '#fff',
                        padding: [0, -10, 3, 15],
                        width: 50
                    },
                    b: {
                        fontSize: '18px',
                        color: '#8891B0',
                        padding: [4, 15, 3, 15]
                    },
                    img0: {
                        width: 26,
                        height: 22,
                        color: '#FF2E05',
                        fontSize: '18px',

                        align: 'center',
                        fontWeight: 400,
                        padding,
                        verticalAlign: 'middle',
                        backgroundColor: {
                            image: ranking1
                        }
                    },
                    img1: {
                        width: 26,
                        height: 22,
                        color: '#FE6E07',
                        fontSize: '18px',
                        align: 'center',
                        fontWeight: 400,
                        padding,
                        verticalAlign: 'middle',
                        backgroundColor: {
                            image: ranking2
                        }
                    },
                    img2: {
                        width: 26,
                        height: 22,
                        color: '#FFD648',
                        fontSize: '18px',
                        align: 'center',
                        fontWeight: 400,
                        padding,
                        verticalAlign: 'middle',
                        backgroundColor: {
                            image: ranking3
                        }
                    },
                    img3: {
                        width: 26,
                        height: 22,
                        color: '#06CDF7',
                        fontSize: '18px',
                        align: 'center',
                        fontWeight: 400,
                        padding,
                        verticalAlign: 'middle',
                        backgroundColor: {
                            image: ranking4
                        }
                    }
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#13387a'
                }
            }
        },

        {
            type: 'category',
            data: xdata,
            inverse: true,
            padding: [0, 0, 0, 0],
            axisLabel: {
                inside: false,
                verticalAlign: 'center',
                padding: [0, 0, 0, 0],
                margin: 20, //刻度标签与轴线之间的距离
                formatter: function (value: any, index: any) {
                    return `{a|${sdata[xdata.indexOf(value)]}}`
                },
                rich: {
                    a: {
                        fontSize: 18,
                        fontFamily: 'Barlow Condensed SemiBold',
                        color: '#00DEFF',
                        padding: [4, 0, 0, 0]
                    }
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#13387a'
                }
            }
        }
    ],
    series: [
        {
            data: sdata,
            type: 'bar',
            barWidth,
            borderRadius: 30,
            showBackground: true,
            verticalAlign: 'center',

            backgroundStyle: {
                color: 'rgba(47, 110, 182, 0.26)',
                borderRadius: 30
            },
            zlevel: 10,
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(44, 205, 223,1)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(0, 151, 237, 1)' // 100% 处的颜色
                    }
                ]
            },

            itemStyle: {
                verticalAlign: 'center',
                zlevel: 10,
                borderRadius: 40,

                borderWidth: 0,
                decal: {
                    color: 'rgba(255,255,255,0.3)',
                    symbol: 'rect',
                    symbolSize: 1,
                    dashArrayY: [1, 0],
                    dashArrayX: 7,
                    rotation: 60
                },

                emphasis: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(255, 68, 0, 1)' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(223, 45, 44, 1)' // 100% 处的颜色
                            }
                        ]
                    }
                }
            }
        },
        {
            // name: "主系列",
            type: 'bar',
            data: sdata,
            barGap: '-100%',
            zlevel: 10,
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(44, 205, 223, 0.3)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(0, 151, 237, 0.3)' // 100% 处的颜色
                    }
                ]
            },
            itemStyle: {
                borderRadius: 30,
                borderWidth: 0,
                emphasis: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(255, 68, 0, 0.2)' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(223, 45, 44, 0.3)' // 100% 处的颜色
                            }
                        ]
                    }
                }
            },
            barWidth
        }
    ]
}